<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="6">
                <div class="container" style="background:#09f">
                    <div class="title">
                        <span>用户统计</span>
                        <el-tag type="success" size="mini">实时</el-tag>
                    </div>
                    <div class="num">{{totalUser}}</div>
                    <div class="tip">当前总用户数量</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" style="background:#09f">
                    <div class="title">
                        <span>商品统计</span>
                        <el-tag type="info" size="mini">实时</el-tag>
                    </div>
                    <div class="num">{{totalGoods}}</div>
                    <div class="tip">当前总商品数量</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" style="background:#09f">
                    <div class="title">
                        <span>订单统计</span>
                        <el-tag type="warning" size="mini">实时</el-tag>
                    </div>
                    <div class="num">{{totalOrders}}</div>
                    <div class="tip">当前总订单数量</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="container" style="background:#09f">
                    <div class="title">
                        <span>销售统计</span>
                        <el-tag type="primary" size="mini">实时</el-tag>
                    </div>
                    <div class="num">{{totalSales}}</div>
                    <div class="tip">当前总销售额(元)</div>
                </div>
            </el-col>
        </el-row>

        
    

    </div>
</template>
<script>
// import * as echarts from 'echarts';
export default {
   data() {
      return {
          totalUser:0,
          totalGoods:0,
          totalOrders:0,
          totalSales:0,
          orderList:[]
      }
   },
   created(){
       this.getUsersList(),
       this.getGoodsList(),
       this.getOrdersList()
   },
   computed:{
   },
   methods:{
       //获取用户列表
       async getUsersList(){
           const{data:res}=await this.$http.get('users',{
               params:{pagenum:1,pagesize:5}
           })
        //    console.log(res)
           if(res.meta.status!==200){
            return this.$message.error('获取用户列表失败')
           }
        //    this.$message.success('获取用户列表成功')
           this.totalUser=res.data.total
       },
       //获取商品列表
       async getGoodsList(){
           const{data:res}=await this.$http.get('goods',{
               params:{pagenum:1,pagesize:5}
           })
        //    console.log(res)
           if(res.meta.status!==200){
            return this.$message.error('获取商品列表失败')
           }
        //    this.$message.success('获取商品列表成功')
           this.totalGoods=res.data.total
       },
       //获取订单列表
       async getOrdersList(){
           const{data:res}=await this.$http.get('orders',{
               params:{pagenum:1,pagesize:5}
           })
        //    console.log(res)
           if(res.meta.status!==200){
            return this.$message.error('获取订单列表失败')
           }
        //    this.$message.success('获取订单列表成功')
           this.totalOrders=res.data.total
           this.orderList=res.data.goods
           //计算销售额
           this.orderList.forEach(item => {
               if(item.pay_status==='1'){
                   this.totalSales+=item.order_price
               }
           });
           //展示图表
        //    this.initChart1()
        //    this.initChart2()
       },
    //    实例化图表
//     initChart1(){
//         var chart1=echarts.init(document.getElementById('chart1'))
//         var option = {
// 	title: {
// 		text: '订单趋势',
// 	},
// 	tooltip: {
// 		trigger: 'axis',
// 		axisPointer: {
// 			type: 'line',
// 		},
// 	},
// 	xAxis: {
// 		type: 'category',
// 		data: ['03.20', '03.21'],
// 	},
// 	yAxis: {
// 		type: 'value',
// 	},
// 	series: [
// 		{
// 			type: 'line',
// 			smooth: true,
// 			data: [260, 406]
// 		},
// 	],
// }
// chart1.setOption(option)
// 对数据处理

    // },

    // initChart2(){
    //     var chart2=echarts.init(document.getElementById('chart1'))
    // }
    
       
}}
</script>
<style lang="less" scoped>
.container{
    height: 80px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #000;
    .title{
        font-size: 10px;
        padding: 3px 5px;
        display: flex;
        justify-content: space-between;

    }
    .num{
        text-align: center;
        font-weight: bold;
        font-size: 20px;
    }
    .tip{
        font-size: 8px;
        padding: 5px ;
    }
}
.echarts-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .el-card {
    height: 400px;
    width: 50%;
    margin: 0 8px;
    padding: 20px;
  }
}
</style>
